起源

GraphQL 是一種 API 查詢語言，Facebook 在 2012 年創造出來，並在 2015 年開源，然後在 2019 年 Facebook 與其他公司一同創立 GraphQL 基金會（隸屬於 Linux 基金會），將 GraphQL 專案作為 GraphQL 基金會的資產 [1]。

https://graphql.org/

概念

GraphQL 的 Graph 指的應該是資料圖（Data Graph）[2]，在計算機科學中，圖（Graph）是由節點（頂點）和邊（連接這些節點的線）組成的結構。在資料模型中，節點代表實體（Entities），邊是實體間的關係（Relationships），如下圖。

特色

客戶端自訂查詢結果

前端可以透過 GraphQL 定義 API 回應的資料格式，代表前端可以預期 API 回應結果，且前端可以只拿它所需要的資料，不會有少給欄位或多給一堆不需要的欄位的狀況，可以減少前後端在需求上的溝通。

舉一個簡單範例，有兩張資料類型 User(id, name, groups, friends), Group(id, name)。

如果前端想要拿到某個 User 與它對應的 Group，可以這樣查詢。

query getUserGroups{
  user(id: 1) {
    id
    name
    groups {
      id
      name
    }
  }
}

單一進入點

相較於過去的 API ，不同的資源存取需要設計與開發不同的路由，而 GraphQL 只有一個。

型別系統

GraphQL 是強型別的，這代表必須較嚴謹定義資料結構並強制使用它的型態。這有助於提升程式碼的可讀性和可維護性。

type Group {
	id: ID!
	name: String!
}

type User {
	id: ID!
	name: String!
	groups: [Group]!
	friends: [User]!
}

一個請求取得多個資源

相較於過去的 API ，存取不同的資源需要存取不同 API，而 GraphQL 中可以在同ㄧ個查詢中查詢多個資源。

由於這個特性，使用 GraphQL 的應用能夠使網路較差的環境下，ㄧ樣有回應迅速的使用體驗。

query getUsersGroups{
  allUsers {
    id
    name
    groups {
      id
    }
 }
 allGroups {
    id
    name
 }
}

參考資料

• [1] https://graphql.bootcss.com/foundation/
• [2] https://www.apollographql.com/blog/graphql/basics/the-concepts-of-graphql/